<template>
    <view style="height: 100%">
        <view class="pd15 bgcf">
            <h2 class="f20 c28 f600 db">{{ info.spare_parts_name }}</h2>
            <view class="df ac f12 c9d mt8 bbf1 pb15">
                <span>{{ info.company }}</span>
                <!-- <span>{{info.created_at}}</span>
    <span class='ml30'>{{info.views}}人已查看</span> -->
            </view>
            <view class="pd150 bbf1">
                <h2 class="f16 c23 f600 db">订单信息</h2>
                <ul class="df ac fw mt5">
                    <li class="mt8 df ac w50">
                        <p class="w68 f14 c9d">询价时间</p>
                        <span class="f14 c28">{{ info.created_at }}</span>
                    </li>
                    <li class="mt8 df ac w50">
                        <p class="w68 f14 c9d">报价截止</p>
                        <span class="f14 c28">{{ info.end_at }}</span>
                    </li>
                    <li class="mt8 df ac w50" v-if="info.type == 1">
                        <p class="w68 f14 c9d">采购区域</p>
                        <span class="f14 c28">{{ info.procurement_area }}</span>
                    </li>
                    <li class="mt8 df ac w50">
                        <p class="w68 f14 c9d">交货地</p>
                        <span class="f14 c28">{{ info.province + info.city }}</span>
                    </li>
                </ul>
            </view>

            <ul class="db mt12" v-if="info.type == 2">
                <li class="df ac mt8">
                    <p class="c9d f14 w68">附件</p>
                    <span
                        class="f14 c10"
                        @tap.native="goDrawing($event, { i: 0, lj_name: info.spare_parts_name, img: info.drawing_show, name: info.file_name, file: info.file_show })"
                        :data-i="0"
                        :data-lj_name="info.spare_parts_name"
                        :data-img="info.drawing_show"
                        :data-name="info.file_name"
                        :data-file="info.file_show"
                    >
                        查看图纸
                    </span>
                </li>
            </ul>

            <view class="pd150 bbf1" v-if="info.type == 1">
                <h2 class="f16 c23 f600 db">交付信息</h2>
                <ul class="df ac fw mt5">
                    <li class="mt8 df ac w50">
                        <p class="w82 f14 c9d">是否含税</p>
                        <span class="f14 c28">{{ info.is_tax_include_title }}</span>
                    </li>
                    <li class="mt8 df ac w50">
                        <p class="w82 f14 c9d">是否含运费</p>
                        <span class="f14 c28">{{ info.is_freight_title }}</span>
                    </li>
                    <li class="mt8 df ac w50">
                        <p class="w82 f14 c9d">付款方式</p>
                        <span class="f14 c28">{{ info.is_budget_title }}</span>
                    </li>
                    <li class="mt8 df ac w50" v-if="info.delivery_at_title">
                        <p class="w82 f14 c9d">交货时间</p>
                        <span class="f14 c28">{{ info.delivery_at_title }}</span>
                    </li>
                </ul>
            </view>
            <!-- 零件信息 -->
            <view class="pt15" v-if="info.type == 1">
                <h2 class="f16 c23 f600 db">零件信息</h2>
                <ul class="db">
                    <block v-for="(item, index) in info.DemandParts" :key="index">
                        <li class="mt15 db pr">
                            <p class="lj-title">零件{{ index + 1 }}</p>
                            <image class="lj-img"  referrerPolicy='no-referrer' :src="item.redrawing"></image>
                            <ul class="db">
                                <li class="df ac mt12">
                                    <p class="c9d f14 w40">名称</p>
                                    <span class="f14 c28">{{ item.spare_parts_name }}</span>
                                </li>
                                <li class="df ac mt8">
                                    <p class="c9d f14 w40">工艺</p>
                                    <span class="f14 c28">{{ item.machining_name }}</span>
                                </li>
                                <li class="df ac mt8">
                                    <p class="c9d f14 w40">材料</p>
                                    <span class="f14 c28">{{ item.material }}</span>
                                </li>
                                <li class="df ac mt8">
                                    <p class="c9d f14 w40">数量</p>
                                    <span class="f14 c28">{{ item.number }}件</span>
                                </li>
                                <li class="df ac mt8">
                                    <p class="c9d f14 w40">附件</p>
                                    <span
                                        class="f14 c10"
                                        @tap.native="
                                            goDrawing($event, { i: index, lj_name: item.spare_parts_name, img: item.drawing_show, name: item.file_name, file: item.file_show })
                                        "
                                        :data-i="index"
                                        :data-lj_name="item.spare_parts_name"
                                        :data-img="item.drawing_show"
                                        :data-name="item.file_name"
                                        :data-file="item.file_show"
                                    >
                                        查看图纸
                                    </span>
                                </li>
                            </ul>
                        </li>
                    </block>
                </ul>
            </view>
        </view>
        <view class="pd15 pb20 bgcf mt10">
            <h2 class="f16 c28 f600 db">采购商信息</h2>
            <ul class="db">
                <li class="df ac mt10">
                    <p class="f14 c9d w80">企业名称</p>
                    <p class="f14 c28">{{ info.company }}</p>
                </li>
                <li class="df ac mt10">
                    <p class="f14 c9d w80">联系人</p>
                    <p class="f14 c28">{{ info.username }}</p>
                </li>
                <li class="df ac mt10" @tap.native="onCall($event, { mobile: info.mobile })" :data-mobile="info.mobile">
                    <p class="f14 c9d w80">联系方式</p>
                    <p class="f14 c28">{{ info.mobile }}</p>
                </li>
                <li class="df ac mt10">
                    <p class="f14 c9d w80">邮箱/QQ</p>
                    <p class="f14 c28">{{ info.email }}</p>
                </li>
            </ul>
        </view>
    </view>
</template>

<script>
const http = require('../../utils/http');

// pages/demand/demandDetails.js
export default {
    data() {
        return {
            show_list: [false, false, false, false, false],
            id: '',
            info: {
                spare_parts_name: '',
                company: '',
                created_at: '',
                end_at: '',
                type: 0,
                procurement_area: '',
                province: '',
                city: '',
                drawing_show: '',
                file_name: '',
                file_show: '',
                is_tax_include_title: '',
                is_freight_title: '',
                is_budget_title: '',
                delivery_at_title: '',
                DemandParts: [],
                username: '',
                mobile: '',
                email: ''
            },
            info_num: {},
            official_show: '',
            img: '',
            num_jf: 0,
            share_num: '',
            count_time: 10
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.setData({
            id: options.id
        });
        this.getInfo();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow(options) {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // 插卡图纸
        goDrawing(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let name = JSON.stringify(e.currentTarget.dataset.name);
            let img = JSON.stringify(e.currentTarget.dataset.img);
            let file = JSON.stringify(e.currentTarget.dataset.file);
            let lj_name = e.currentTarget.dataset.lj_name;
            uni.navigateTo({
                url: '/pages/demand/drawing?name=' + name + '&file=' + file + '&img=' + img + '&lj_name=' + lj_name
            });
        },

        // 打电话
        onCall(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let mobile = e.currentTarget.dataset.mobile;
            if (mobile == '****') {
                return false;
            }
            uni.makePhoneCall({
                phoneNumber: mobile
            });
        },

        // 获取详情
        getInfo() {
            http.request('user/demandInfo', {
                id: this.id
            })
                .then((res) => {
                    this.setData({
                        info: res.data.info
                    });
                })
                .catch((res) => {
                    console.log(res);
                });
        }
    }
};
</script>
<style>
@import './purchaseDetail.css';
</style>
